React Patch 方法

React 又是如何让浏览器展示出最新的数据呢?

React Patch 实现了关键的最后一步。所谓 Patch，简而言之就是将 tree diff 计算出来的 DOM 差异队列更新到真实的 DOM 节点上，最终让浏览器能够渲染出更新的数据。可以这么说，如果没有 Patch，那么 React 之前基于 Virtual DOM 做再多性能优化的操作都是徒劳，因为浏览器并不认识 Virtual DOM。虽然 Patch 方法如此重要，但它的实现却非常简洁明了，主要是通过遍历差异队列实现的。遍历差异队列时，通过更新类型进行相应的操作，包括:新节点的插入、已有节 点的移动和移除等。

这里为什么可以直接依次插入节点呢?原因就是在 diff 阶段添加差异节点到差异队列时，本身就是有序添加。也就是说，新增节点(包括 move 和 insert)在队列里的顺序就是最终真实 DOM 的顺序，因此可以直接依次根据 index 去插入节点。而且，React 并不是计算出一个差异就去执行一次 Patch，而是计算出全部差异并放入差异队列后，再一次性地去执行 Patch 方法完成真实 DOM 的更新。